/*
 * @Author: hongbin
 * @Date: 2022-04-25 21:41:34
 * @LastEditors: hongbin
 * @LastEditTime: 2022-04-29 23:38:06
 * @Description:切换主题模式开关
 */
import { FC, ReactElement } from "react";
import styled, { css, useTheme } from "styled-components";
import { flexCenter } from "../styled";
import { useToggleTheme } from "../styled/ThemeProvide";

interface IProps {}

const ModeSwitch: FC<IProps> = (): ReactElement => {
  const { mode } = useTheme();
  const toggleMode = useToggleTheme();
  return (
    <div data-mode-switch>
      <Container onClick={toggleMode} light={mode === "light"}>
        {SunIcon}
        {NightIcon}
      </Container>
    </div>
  );
};

export default ModeSwitch;

const Container = styled.div<{ light: boolean }>`
  width: 2.5vmax;
  height: 2.5vmax;
  border-radius: 2.5vmax;
  background: ${(props) => (props.light ? "#fbe9ce" : "#483f5e")};
  opacity: 0.8;
  position: relative;
  ${flexCenter};
  transition: opacity 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  box-shadow: 0 0 0 4px ${(props) => (props.light ? "#bba9eb" : "#cccccc")};
  :hover {
    opacity: 1;
    box-shadow: 0 0 0 6px ${(props) => (props.light ? "#e2a140" : "#8a61ff")};
  }
  svg {
    width: 1.5vmax;
    height: 1.5vmax;
    position: absolute;
    transition: opacity 0.3s ease;
    opacity: 0;
  }
  ${(props) =>
    props.light
      ? css`
          svg:first-child {
            opacity: 1;
          }
        `
      : css`
          svg:last-child {
            opacity: 1;
          }
        `}
`;

const SunIcon = (
  <svg
    viewBox="0 0 1024 1024"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    p-id="1303"
    width="32"
    height="32"
  >
    <path
      d="M524.8 823.2448a38.4 38.4 0 0 1 38.0416 33.1776l0.3584 5.2224v98.3552a38.4 38.4 0 0 1-76.4416 5.2224L486.4 960v-98.3552a38.4 38.4 0 0 1 38.4-38.4z m261.4272-90.8288l3.8912 3.4304 69.5808 69.5296a38.4 38.4 0 0 1-50.3808 57.7536l-3.9424-3.4304-69.5296-69.5808a38.4 38.4 0 0 1 50.3808-57.7024z m-472.4736 3.4304a38.4 38.4 0 0 1 3.4304 50.3808l-3.4304 3.8912-69.5296 69.5808a38.4 38.4 0 0 1-57.7536-50.3808l3.4304-3.9424 69.5808-69.5296a38.4 38.4 0 0 1 54.272 0zM524.8 294.4a230.4 230.4 0 1 1 0 460.8 230.4 230.4 0 0 1 0-460.8z m435.2 192a38.4 38.4 0 0 1 5.2224 76.4416L960 563.2h-98.3552a38.4 38.4 0 0 1-5.2224-76.4416l5.2224-0.3584h98.3552z m-772.0448 0a38.4 38.4 0 0 1 5.2224 76.4416L187.904 563.2H89.6a38.4 38.4 0 0 1-5.2224-76.4416L89.6 486.4h98.3552z m671.744-296.448a38.4 38.4 0 0 1 3.4304 50.3296l-3.4304 3.9424-69.5808 69.5296a38.4 38.4 0 0 1-57.7024-50.3808l3.4304-3.8912 69.5296-69.5808a38.4 38.4 0 0 1 54.272 0zM240.2816 186.4192l3.9424 3.4304 69.5296 69.5808a38.4 38.4 0 0 1-50.3808 57.7024l-3.8912-3.4304L189.9008 244.224a38.4 38.4 0 0 1 50.3808-57.7536zM524.8 51.2a38.4 38.4 0 0 1 38.0416 33.1776L563.2 89.6v98.3552a38.4 38.4 0 0 1-76.4416 5.2224L486.4 187.904V89.6a38.4 38.4 0 0 1 38.4-38.4z"
      fill="#E2A13F"
      p-id="1304"
    ></path>
  </svg>
);

const NightIcon = (
  <svg
    viewBox="0 0 1024 1024"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    p-id="2837"
    width="32"
    height="32"
  >
    <path
      d="M411.2 128.7m-30.5 0a30.5 30.5 0 1 0 61 0 30.5 30.5 0 1 0-61 0Z"
      p-id="2838"
    ></path>
    <path
      d="M126.5 616.6m-30.5 0a30.5 30.5 0 1 0 61 0 30.5 30.5 0 1 0-61 0Z"
      p-id="2839"
    ></path>
    <path
      d="M289.2 860.6m-30.5 0a30.5 30.5 0 1 0 61 0 30.5 30.5 0 1 0-61 0Z"
      fill="#B76BF9"
      p-id="2840"
    ></path>
    <path
      d="M919.5 250.6m-30.5 0a30.5 30.5 0 1 0 61 0 30.5 30.5 0 1 0-61 0Z"
      fill="#B76BF9"
      p-id="2841"
    ></path>
    <path
      d="M756.8 433.6m-30.5 0a30.5 30.5 0 1 0 61 0 30.5 30.5 0 1 0-61 0Z"
      p-id="2842"
    ></path>
    <path
      d="M716.2 840.3m-30.5 0a30.5 30.5 0 1 0 61 0 30.5 30.5 0 1 0-61 0Z"
      fill="#B76BF9"
      p-id="2843"
    ></path>
    <path
      d="M559.6 469.9c14.2-83.5 65.9-151.2 134.8-189.1-35.7-24.9-77.2-42.8-123-50.6-166.1-28.2-323.6 83.6-351.9 249.6S303 803.4 469.1 831.6c93.7 15.9 184.7-12.8 251.3-70.6-112.5-46.6-182.1-166-160.8-291.1z"
      fill="#8A61FF"
      p-id="2844"
    ></path>
  </svg>
);
